<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>基础语法2 v-on 事件绑定</title>
    <script src="http://unpkg.com/vue@3"></script>
</head>
<body>
    <div id="app">
      <h1>知识点1：v-on指令：鼠标单击事件</h1>
        <p>我已经被你点{{num}}了</p>
        <button v-on:click="num++">莫挨老子</button>
        <button v-on:click="num--">莫挨老子，麻溜的滚</button>
        <h3>许多事件处理逻辑会更加复杂，所以在复杂的逻辑下，直接把代码写在v-on指令中是不合适的，
            因此，v-on可以接收一个需要调用的方法名称
        </h3>
        <button v-on:click="log()">打印消息</button>
        <button v-on:click="log('我是帅逼')">打印含参数的消息</button>
        <h3>v-on:click 可以简写 @click </h3>
        <button @click="log('马上下课了，干饭了奥')">简写式</button>
      <h1>知识点2：键盘事件keyup(键盘释放),keydown(键盘按下)</h1>
        <input type="text" @keyup="show('我被释放了！')">
        <input type="text" @keydown="show('我被按下了！')">
      <h1>知识点3：其他事件：dbclick双击，contextmenu右击，mouseover鼠标上移，mouseout鼠标移开</h1>
        <p>看变化{{num}}</p>
        <button @dblclick="num++">双击</button>
        <button @contextmenu="num++">右击</button>
        <button @mouseover="num++">鼠标上移</button>
        <button @mouseout="num++">鼠标移开</button>
      <h1>知识点4：事件修饰符</h1>
        <h3>1.ones,只能点击一次</h3>
        <button @click="num++">你只能点一次</button>
        <h3>2.prevent,阻止元素默认行为</h3>
            <h4>submit有一个默认行为，提交后重新渲染页面，可以通过prevent阻止</h4>
            <form action="" @submit="handleSubmit">
                <p>不使用修饰符</p>
                <button type="submit">提交</button>
            </form>
            <form action="" @submit.prevent="handleSubmit">
                <p>使用修饰符</p>
                <button type="submit">提交</button>
            </form>
        <h3>3.stop修饰符，阻止层叠事件中的冒泡</h3>
            <h4>冒泡是内部元素事件触发后，继续向外层触发事件</h4>
            <div id="box1" @click.stop="box('我是box1')">box1
                <div id="box2" @click.stop="box('我是box2')">box2
                    <div id="box3" @click.stop="box('我是box3')">box3
                    </div>
                </div>
            </div>
        <h3>4.capture修饰符，事件的捕获</h3>
            <h4>在层叠事件中，我们默认从内到外触发事件，想要先处理外层事件，可以使用capture
                当内部元素触发时，先处理capture修饰的事件，然后在提交当前事件，捕获顺序由外到内
            </h4>
            <div id="box1" @click.capture="box('我是box1')">box1
                <div id="box2" @click.capture="box('我是box2')">box2
                    <div id="box3" @click="box('我是box3')">box3
                    </div>
                </div>
            </div>
        <h3>5.self修饰符,指绑定了事件的对象的那个对象层中使用</h3>
            <div id="box1" @click="box('我是box1')">box1
                <div id="box2" @click.stop.self="box('我是box2')">box2
                    <div id="box3" @click="box('我是box3')">box3
                    </div>
                </div>
            </div>
            <h4>修饰符可以叠加,例如.capture.stop</h4>
        <h3>6.监听键盘按键修饰符</h3>
            <p>.enter.tab.delete(删除与回退).esc.space.up.sown.left.right.ctrl.alt.shift.meta(win)</p>
            <h4>按键监听可以组合,例alt+c</h4>
            <input type="text" @keyup.alt.c="show('alt+c')">
            <button @click.ctrl.shift="show(shift+ctrl)">123</button>
            <h4>.exact允许你控制精准的系统修饰符组合触发</h4>
            <button @click.ctrl.shift.exact="show(shift+ctrl)">123加强</button>
    </div>
</body>
</html>

<script>
    const appConn = Vue.createApp({
       data() {
        return {
            num:0
        }
       },
       methods: {
            log(val){
                console.log(val||'滚蛋');
            },
            handleSubmit(){
                console.log('ok');
            },
            show(val){
                console.log(val)
            },
            box(val){
                alert(val);
            }
       },
    }).mount("#app")   
</script>

<style>
    #box1{
        height: 200px;
        width: 300px;
        background-color: #66ccff;
    }
    #box2{
        height:150px;
        width: 250px;
        background-color: #ff6666;
    }
    #box3{
        height:100px;
        width: 200px;
        background-color: #ffcc66;
    }
</style>